@extends('Index/webpage/webpage_base')
@section('shop-con')
	<div class="content inner">
		<section class="filter-section clearfix">
			<ol class="breadcrumb">
				<li><a href="/">首页</a></li>
				<li class="active">商品筛选</li>
			</ol>
			<div class="filter-box">
				<div class="all-filter">
					<div class="filter-value">
						<div class="filter-title">选择商品分类 <i class="iconfont icon-down"></i></div>
						<!-- 全部大分类 -->
						<ul class="catelist-card">
							<a href="javascript:;"><li class="active">全部分类</li></a>
							@foreach($arr1 as $list1)
							<a href="javascript:;"><li>{{$list1->classify}}</li></a>
							@endforeach
						</ul>
						<!-- 已选选项 -->
						<div class="ul_filter">
							
						</div>
						<a class="reset pull-right" href="/index/webpage/item_category">重置</a>
					</div>
				</div>
				
				<div class="filter-prop-item">
					<span class="filter-prop-title">分类：</span>
					<ul class="clearfix">
						<a href="javascript:;"><li class="active">全部</li></a>
						@foreach($arr2 as $list2)
						<a href="javascript:;"><li>{{$list2->classify}}</li></a>
						@endforeach
					</ul>
				</div>

				<script>
					// 重置
					$('.reset').click(function(){
						sessionStorage.clear();
						// window.location.href="/index/webpage/item_category?keywords=";
					})
					// 大分类
					$('.catelist-card a').click(function(){
						cls=$(this).children('li').html();
						sessionStorage.clear();
						sessionStorage.cls=cls;
						sessionStorage.index=$(this).index();
						window.location.href="/index/webpage/item_category?cls="+cls;
					})
					// 二级分类
					$('.filter-prop-item ul a').click(function(){
						cls2=$(this).children('li').html();
						sessionStorage.cls2=cls2;
						sessionStorage.index2=$(this).index();
						if(sessionStorage.cls){
							window.location.href="/index/webpage/item_category?cls="+sessionStorage.cls+"&cls2="+cls2;
						}else{
							window.location.href="/index/webpage/item_category?&cls2="+cls2;
						}
					})
					// 取消标签
					$('.ul_filter').delegate('.close','click',function(){
						if($(this).parent().hasClass('cls')){
							sessionStorage.clear();
							window.location.href="/index/webpage/item_category?cls="+"全部分类";
						}else if($(this).parent().hasClass('cls2')){
							sessionStorage.removeItem('cls2');
							sessionStorage.removeItem('index2');
							window.location.href="/index/webpage/item_category?cls="+sessionStorage.cls;
						}
					})

					if(sessionStorage.cls){
						$('.catelist-card a').eq(sessionStorage.index).children('li').addClass('active').parent().siblings().children('li').removeClass('active');
						$('.ul_filter').append("<span class='pull-left cls'>类别："+sessionStorage.cls+" <a href='javascript:;' class='close'>&times;</a></span>");
					}
					if(sessionStorage.cls2){
						$('.filter-prop-item ul a').eq(sessionStorage.index2).children('li').addClass('active').parent().siblings().children('li').removeClass('active');
						$('.ul_filter').append("<span class='pull-left cls2'>分类："+sessionStorage.cls2+" <a href='javascript:;' class='close'>&times;</a></span>");
					}

					// 清除sessionStorage
					// var url=window.location.href;
					// var urli=url.indexOf('?');
					// var urls=url.substr(0,urli);
					// if(urls!=='http://www.pro2.com/index/webpage/item_category'){
					// 	sessionStorage.clear();
					// }
				</script>
			</div>
			<div class="sort-box bgf5">
				<!-- <div class="sort-text">排序：</div> -->
				<!-- <a href="/index/"><div class="sort-text">销量 <i class="iconfont icon-sortDown"></i></div></a>
				<a href="/index/"><div class="sort-text">评价 <i class="iconfont icon-sortUp"></i></div></a>
				<a href="/index/"><div class="sort-text">价格 <i class="iconfont"></i></div></a> -->
				<div class="sort-total pull-right"></div>
			</div>

		</section>
		<section class="item-show__div clearfix">
			<div class="pull-left">
				<div class="item-list__area clearfix">
					@foreach($goods as $glist)
					<div class="item-card">
						<a href="/index/webpage/item_show?id={{$glist->id}}" class="photo">
							<img src="/upload/{{$glist->img}}" alt="{{$glist->name}}" class="cover">
							<div class="name">{{$glist->name}}</div>
						</a>
						<div class="middle">
							<div class="price"><small>￥</small>{{$glist->price}}</div>
							<div class="sale"><a href="/index/webpage/item_show?id={{$glist->id}}">加入购物车</a></div>
						</div>
						<div class="buttom">
							<div>销量 <b>{{$glist->sales}}</b></div>
							<!-- <div>人气 <b>888</b></div> -->
							<div>评论 <b>{{$glist->cmt_count}}</b></div>
						</div>
					</div>
					@endforeach
				</div>
				<!-- <script>
					$('.sort-total').text("共"+$('.item-list__area .item-card').length+"件商品");	
				</script> -->
				<style>
					.pagination{
						margin:20px auto;
					}
				</style>
				<!-- 分页 -->
				{{$goods}}
			</div>
			<div class="pull-right">
				
				<div class="desc-segments__content">
					<div class="lace-title">
						<span class="c6">爆款推荐</span>
					</div>
					<div class="picked-box">
					@foreach($hotgoods as $hlist)
						<a href="/index/webpage/item_show?id={{$hlist->id}}" class="picked-item"><img src="/upload/{{$hlist->img}}" alt="" class="cover"><span class="look_price"><small>￥</small>{{$hlist->price}}</span></a>
					@endforeach
					</div>
				</div>
			</div>
		</section>
	</div>
@endsection